var React = require('react');
var PageView = require('../../controls/PageView');
var Table = require('../../controls/table/Table');
var Form = require('../../controls/Form');
var Button = require('../../controls/Button');
var Select = require('../../controls/Select');
var _session = JSON.parse(localStorage.getItem('LOGIN_SESSION'));
module.exports = React.createClass({
	getInitialState: function () {
		return {
			toolbarItems: [
				{ name: 'add', text: 'Add', icon: 'fa-plus', onClick: this.__onAdd },
				{ name: 'delete', text: 'Delete', icon: 'fa-minus', status: 'danger', onClick: this.__onDelete }
			],
			formItems: [
				{ title: 'Name', name:'Name', type:'text', onBlur: this.__validateName },
				{ title: 'Data File', name:'file', type:'file' },
				{ title: 'Description', name:'Description', type:'textarea' },
				{ title: 'Visible', value: '0', name:'Visible', type:'select', data: [{ text:'Public',value:'0'},{text:'Protect',value:'1'}] }
			],
			dataSourceHeader: [
				{ title: 'Source Name', name: 'Name', type: 'text', width: 160 },
				{ title: 'Access Url', name: 'AccessUrl', type: 'text' },
				{ title: 'Size', name: 'Size', type: 'text', width: 80 },
				{ title: 'Modification Time', name: 'ModificationTime', type: 'date', width: 140 },
				{ title: 'Actions', name: 'Actions', type: 'action', width: 60 }
			],
			dataSource: []
		}
	},
	__onDelete: function (){
		var _values = this.refs.dstable.getCheckedItems();
		//console.log(_values);
		if(_values.length){
			Popup.confirm({
				content: 'Are you confirm delete those ' + _values.length + ' records？',
				onCancle: function (){
					Popup.message({
						content: 'Ok, you cancle.',
						type: 'danger'
					});
				},
				onConfirm: function () {
					Popup.message({
						content: 'Congratulations, delete success.',
						type: 'success'
					})
				}
			});
		} else {
			Popup.message({
				content: 'First you must choose table row.',
				type: 'warning',
				mask: true,
				callback: function (destory){
					setTimeout(function (){
						destory();
					}, 1000);
				}
			});
		}
	},
	componentDidMount:function(){
		/*
		this.refs.dstable.setData([
			{
				Name: 'DS001',
				UserName: 'dev_01',
				Tenant: '1234',
				AccessUrl: 'http://www.cisco.com/devnet_01',
				Size: '120M',
				Visible: 'True',
				ModificationTime: '2016-01-11 14:20:46'
			}
		]);*/
	},
	__validateName: function (event){
		var _value = event.target.value;
		Store.post('ddp/ds/v1/check', { Name: _value }).exec().then(function (data){
			event.self.setState({
				tip: data.result
			});
		});
	},
	__onRowActions: function (action, data, item){
		switch (action) {
			case "Delete":
				Popup.confirm({
					content: 'Are you confirm delete this Item？',
					onCancle: function (){
						/*
						Popup.message({
							content: '不好意思，取消删除了',
							type: 'danger'
						});*/
					},
					onConfirm: function () {
						Popup.message({
							content: 'Delete Success!',
							type: 'success'
						})
					}
				});
				break;
			case "View":

				break;
		}
	},
	__onTableRowMenuChange: function (eventData, data, item){
		this.__onRowActions(eventData.text, data, item);
	},
	__tableColumnRender: function (index, data, item, value){
		switch (index) {
			case 1:
				return <span><i className="fa fa-cube" style={{ marginRight: 5 }}></i>{value}</span>;
			case 2:
				return <span style={{ color: '#43a1e8' }}>{value}</span>;
			case 5:
				var _actions = [
					{ text: 'Delete', icon: 'fa-minus' },
					{ text: 'View', icon: 'fa-search' },
					{ text: 'Download', icon: 'fa-download' }
				];

				return <Select
						popupWidth={120}
						popupPosition="fixed"
						data={_actions}
						singleSelect={false}
						style={{ width: 20, margin: '0 auto' }}
						onChange={(event, eventData)=>this.__onTableRowMenuChange(eventData, data, item)}
						bottomPopupViewRender={()=>{ return <span style={{border:'1px solid #D4CFCF', padding: '0px 4px', borderRadius: '50%'}}><i className="fa fa-caret-down"></i></span>; }} />;
		}
	},
	__onSubmit: function (){
		Popup.message({
			content: 'It is loading...',
			type: 'success'
		});
	},
	__onAdd: function (){
		Popup.dialog({
			title: 'Add Data Source',
			width: 800,
			content: <Form
				method="POST"
				layout="stacked"
				hiddens={_session}
				action="http://10.140.41.108:5000/ddp/ds/v1/create"
				style={{ margin: 25 }}
				syncSubmit={true}
				items={this.state.formItems} >
				<Button float="right" style={{marginTop: 10 }} text="Submit" onClick={(props)=>{props.form.submit()}}/>
				<Button float="right" status="danger" style={{margin: 10}} text="Cancle" onClick={()=>Popup.close('dialog')}/>
			</Form>
		});
	},
	render: function(){
		return (
			<PageView
				hHeight={40}
				mode="fixed"
				icon={this.props.icon}
				title={this.props.title}
				toolbarItems={this.state.toolbarItems}
				toolbarItemFloatDirection="right">
				<div className="flex-item">
					<input type="search" placeholder="Search Data Source" name="search" style={{width: 200, height: 30 }} />
				</div>
				<div className="flow-content">
					<Table
						ref="dstable"
						enableFilter={false}
						checkbox={30}
						showHeader={true}
						items={this.state.dataSourceHeader}
						data={Store.post('ddp/ds/v1/user/list', _session)}
						columnRender={this.__tableColumnRender}/>
				</div>
			</PageView>
		);
	}
});
